<template>
	<view class="date_type">
		<u-picker @confirm="bindPickerConfirm" @cancel="typeChange"
			class="type_picker width_92 height_44 bc_fff br_8 mt_12 mr_10" :show="showType" :columns="dateTypeList"
			keyName="label">

		</u-picker>

		<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">

		</picker>
		<view class="time_box height_44  mt_12 w100">

			<view class="fz_16 fb fc_333 type_choose bc_fff br_8 mr_10 height_44 box" @click="typeChange">

				<view class="">
					{{pickerValue.label}}
				</view>
				<u-icon name="arrow-down" color="#666666"></u-icon>
			</view>
			<view class="date_picker_wrap">
				<picker :disabled="pickerValue.type!=5"
					class="date_picker_item  height_44 width_116 mr_10 bc_fff br_8 box" mode="date"
					@change="onDateChange($event,'startTime')">
					<view class="date_picker height_44 width_116 mr_10 bc_fff br_8 box">
						<view class="fz_14 fc_333" v-if="pickerValue.startTime">
							{{pickerValue.startTime}}
						</view>
						<view class="fz_14 fc_999" :style="{color:pickerValue.type==5?'#333':'#999'}" v-else>
							开始时间
						</view>
						<u-icon name="arrow-down" color="#666666"></u-icon>

					</view>
				</picker>
				<picker :disabled="pickerValue.type!=5"
					class="date_picker_item height_44 width_116 mr_10 bc_fff br_8 box" mode="date"
					@change="onDateChange($event,'endTime')">
					<view class="date_picker height_44 width_116 mr_10 bc_fff br_8 box">
						<view class="fz_14 fc_333" v-if="pickerValue.endTime">
							{{pickerValue.endTime}}
						</view>
						<view class="fz_14 fc_999" :style="{color:pickerValue.type==5?'#333':'#999'}" v-else>
							结束时间
						</view>
						<u-icon name="arrow-down" color="#666666"></u-icon>

					</view>
				</picker>
			</view>
			<!-- <u-icon name="arrow-right" color="#666666"></u-icon> -->

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			pickerValue: {
				type: Object,
				default: function() {
					return {
						type: 1,
						label: "今日",
						startTime: "",
						endTime: ""
					}
				}
			}
		},
		data() {
			return {
				timeNow: Number(new Date()),
				showDate: false,
				showType: false,
				dateTypeList: [[{
					label: "今日",
					id: 1
				}, {
					label: "昨日",
					id: 2
				}, {
					label: "近7天",
					id: 3
				}, {
					label: "近30天",
					id: 4
				}, {
					label: "自定义",
					id: 5
				}]]
			}
		},
		methods: {
			onDateChange(e, type) {
				const newValue = {
					...this.pickerValue
				}
				const date = e.detail.value
				newValue[type] = date
				this.$emit("updatePickerValue", newValue)
				console.log("选择日期")
				console.log(e)
				console.log(type)
			},
			bindDateChange(e) {
				console.log("时间选择")
				console.log(e)
			},
			typeChange(e) {
				this.showType = !this.showType
			},
			datePickerChange() {
				console.log("展示日期选择")
				this.showDate = !this.showDate
				console.log(this.showDate)
			},
			updatePickerValue(value) {
				this.$emit("updatePickerValue", value)
			},
			bindPickerConfirm(e) {
				console.log("选择类型")
				console.log(e)
				const value = e.value[0]
				let newPickerValue = {
					...this.pickerValue
				}
				newPickerValue.type = value.id
				newPickerValue.label = value.label
				this.typeChange()
				console.log(newPickerValue)
				// if (value.id == 5) {
				// 	this.datePickerChange()
				// }
				if (value.id != 5) {
					newPickerValue.startTime = ""
					newPickerValue.endTime = ""
					// newPickerValue.label = value.label
				} else {
					this.datePickerChange()
					// newPickerValue.label = ""
				}
				this.updatePickerValue(newPickerValue)
				console.log("确定选择")
				console.log(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.date_picker_wrap {
		width: 484rpx;
		height: 88rpx;
		display: inline-block;
		@include flex_box(row, nowrap, space-between, center);

		.date_picker_item {
			// width: 484rpx;
			height: 88rpx;
			@include flex_box(row, nowrap, space-between, center);

			.date_picker {
				@include flex_box(row, nowrap, space-between, center);
				height: 100%;
				padding: 0 24rpx;
			}
		}
	}

	.date_type {
		position: relative;
		@include flex_box(row, nowrap, space-between, center);
	}

	.date_picker {
		@include flex_box(row, nowrap, space-between, center);
		height: 100%;
		padding: 0 24rpx;
	}

	.time_box {
		width: 100%;
		// @include set_padding(0rpx, 16rpx)
		@include flex_box(row, nowrap, space-between, center);

		.type_choose {
			width: 184rpx;
			padding: 0 24rpx;
			@include flex_box(row, nowrap, space-between, center);

		}
	}

	.type_picker {
		height: 100%;
		// width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 99;
		border: 1px solid red;
		@include set_padding(0rpx, 16rpx)
	}
</style>